<template>
  <div class="flex">
    <a-card class="w-1/3" style=" height: calc(100vh - 200px); float: left">
      <div slot="title">
        <h2>机构列表</h2>
      </div>
      <a-tree
        ref="tree1"
        :tree-data="treeData1"
        @select="onClick"
        showLine
        blockNode
      >
        <template  slot="custom" slot-scope="row">
          <span style="display: inline-block; max-width: 200px;overflow: hidden;text-overflow: ellipsis;">{{ row.title }}</span>
          <a-button-group style="float: right">
            <a-button
               type="link"
              @click="slotAddSame(row)"
              icon="plus-circle"
              title="添加"
            ></a-button>
            <!-- <a-button
              size="small"
              @click="slotAddSub(nodeData)"
              icon="share-alt"
              title="添加下级"
            ></a-button> -->
            <a-button
               type="link"
              @click="slotModify(row)"
              icon="form"
              title="修改"
            ></a-button>
            <a-popconfirm
                title="确定要删除选中记录么?"
                ok-text="删除"
                cancel-text="取消"
                @confirm="slotDelete(row)"
                @cancel="cancel"
              >
            <a-button
               type="link"
              icon="close-circle"
              title="删除"
            ></a-button>
            </a-popconfirm>
          </a-button-group>
        </template>
      </a-tree>
    </a-card>
    <a-card class="w-2/3">
      <div slot="title">
        <h2>详细信息</h2>
      </div>
      <div v-if="row && row.id" class="text-base leading-6" style="color: rgba(0, 0, 0, 0.85);">
        <div>名称：{{row.name}}</div>
        <div>书记：{{getCadreName(row.secretary)}}</div>
        <div>副书记：{{getCadreName(row.viceSecretary)}}</div>
        <div>组织委员：{{getCadreName(row.organization)}}</div>
        <div>宣传委员：{{getCadreName(row.publicity)}}</div>
      </div>
      <div v-if="row && row.id">
        <div class="flex items-center justify-end">
          <div v-if="data && data.length" class="inline-block mr-1 text-base font-bold">总计：{{data.length}}条</div>
          <a-button class="button-item mb-1" type="primary" @click="downloadExcel">导出</a-button>
        </div>
        <a-table 
           :scroll="{y: 450 }"
          :columns="columns" 
          :data-source="data" 
          rowKey="id" 
          :pagination="false">
          <template slot="sex" slot-scope="text, record">
            <span v-if="record.sex == 1">男</span>
            <span v-else-if="record.sex == 2">女</span>
          </template>
        </a-table>
      </div>
    </a-card>
    <a-modal
      title="机构信息"
      v-if="visible"
      :visible="visible"
      width="640px"
      height="672px"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      :destroyOnClose="true"
    >
      <Form ref="record" :form="record" @pass="pass" @reject="reject" />
    </a-modal>
  </div>
</template>

<script>
import Form from "../form";
import {cadre} from "../../../components/mixins/cadre"
export default {
  components: { Form },
  mixins: [cadre],
  data () {
    return {
      visible: false,
      confirmLoading: false,
      record: {},
      row:{},
      addId:"",
      treeData1: [],
      defaultExpandedKeys: [],
      data: [],
      columns: [
        {
          title: "姓名",
          dataIndex: "name",
        },
        {
          title: "学历",
          dataIndex: "education",
        },
        {
          title: "性别",
          dataIndex: "sex",
          scopedSlots: { customRender: 'sex' },
        },
        {
          title: "身份证",
          dataIndex: "cardNo",
        },
        {
          title: "电话",
          dataIndex: "phone",
        },
        {
          title: "组织",
          dataIndex: "orgName",
        },
      ],
    }
  },
  mounted () {
    this.getTree()
  },
  methods: {
    getMemberList(item){
      this.data = []
      this.$ajax({
        url: this.$api.member.findList,
        data: Object.assign({
          status: 2,
          org_id: item.id
        }),
        success: (result) => {
          this.data = result;
        },
      });
    },
    onClick(row, e){
      if (e.selectedNodes && e.selectedNodes.length) {
        this.row = e.selectedNodes[0].data.props;
        this.getMemberList(this.row)
      }
    },
     reject() {
      this.confirmLoading = false;
    },
     pass() {
      this.visible = false;
      this.confirmLoading = false;
      this.getTree();
      this.getMemberList(this.row)
    },
     cancel() {
      this.$message.warning("您已取消操作");
    },
    getTree () {
      this.treeData1 = []
      this.defaultExpandedKeys = []
      this.$ajax({
        url: this.$api.organization.findList,
        data: {
        },
        success: (result) => {
          this.treeData1 = this.getMenuBtnList(result)
        },
      });
    },
    getMenuBtnList (result) {
      if(result){
        for (let i = 0; i < result.length; i++) {
          result[i].title = result[i].name
          result[i].key = result[i].id
          result[i].scopedSlots = {title: "custom"}
          this.defaultExpandedKeys.push(result[i].id)
          if( result[i].children){
            this.getMenuBtnList(result[i].children)
          }
        }
      }
      return result
    },
    handleOk(e) {
      this.confirmLoading = true;
      this.$refs.record.save(this.addId);
    },
    handleCancel(e) {
      this.visible = false;
    },
    slotAddSame (e) {
      this.addId = e.id
       this.record = {}
      this.visible = true
    },
    slotAddSub () {

    },
    slotModify (row) {
      console.log(row);
     this.record = row;
      this.visible = true;
    },
    slotDelete (row) {
      this.$ajax({
        url: this.$api.organization.deleteByIds,
        data: [row.id],
        success: (result) => {
          this.$message.success("操作成功");
          this.getTree();
        },
      });
    },
    
    // 导出
    downloadExcel () {
      import("@/vendor/Export2Excel").then(excel => {
        const tHeader = [
          "姓名",
          "学历",
          "性别",
          "身份证",
          "电话",
          "组织",
        ];
        const data = this.formatJson(
          [
            "name",
            "education",
            "sex",
            "cardNo",
            "phone",
            "orgName",
          ],
          this.data
        );
        data.push(['总计', this.data.length + '条'])
        excel.export_json_to_excel({
          header: tHeader, // Header Required
          data, // Specific data Required
          filename: "机构列表", // Optional
          autoWidth: true, // Optional
          bookType: "xlsx" // Optional
        });
      });
    },
    formatJson (filterVal, jsonData) {
      var index = 0
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "sex") {
            if (v[j] == 1)  {
              return '男';
            }else if (v[j] == 2)  {
              return '女';
            }
          } else {
            return v[j];
          }
        })
      );
    },

  }
}
</script>

<style lang="less" scoped>
/deep/ .anticon{
  color: rgba(0, 0, 0, 0.65);
}
/deep/ .ant-tree-switcher-line-icon{
  margin-top: -3px;
}
</style>